/*
 * @Description: 文章列表中的列表项
 * @Author: YWJ 
 * @Date: 2022-04-20 09:35:34 
 * @Last Modified by: YWJ
 * @Last Modified time: 2022-05-16 13:21:24
 */

<template>
  <el-card class="me-area" :body-style="{ padding: '16px' }">
    <div class="me-article-header">
      <!-- 文章标题 用于点击跳转 -->
      <a @click="view(article.articleId)" class="me-article-title">{{
        article.title
      }}</a>


      <!-- 评论数 -->
      <span class="me-pull-right me-article-count">
        <i class="el-icon-chat-dot-square"></i>&nbsp;{{ article.commentCounts }}
      </span>

      <!-- 查看数 -->
      <span class="me-pull-right me-article-count">
        <i class="el-icon-view"></i>&nbsp;{{ article.viewCounts }}
      </span>

      <span class="me-pull-right me-article-count">
        <i class="iconfont icon-dianzan"></i>&nbsp;{{ article.likeCounts }}
      </span>

      <span class="me-pull-right me-article-count">
        <i class="el-icon-star-off"></i>&nbsp;{{ article.collectedCounts }}
      </span>
    </div>

    <!-- 文章描述 -->
    <div class="me-artile-description">
      {{ article.articleContext }}
    </div>

    <div class="articleItem-picflex">
      <el-image
        v-for="(item, index) in paths"
        :key="index"
        style="width: 90px; height: 90px; margin-right: 8px"
        :src="'http://chm.pengdong.top/index/get/' + paths[index]"
        fit="scale-down"
      ></el-image>
    </div>

    <div class="me-article-footer">
      <!-- 作者 -->
      <img
        class="me-author-picture"
        :src="'http://chm.pengdong.top/index/get/' + sculpture"
        alt=""
      />
      <span class="me-article-author">
        <i class="me-icon-author"></i>&nbsp;
        {{ nickname }}
      </span>

      <!-- 关注 -->
      <el-dropdown v-if="nowUser!='99999999999'" @command="handleCommand" trigger="click">
        <span class="el-dropdown-link">
          <i class="el-icon-arrow-down el-icon--right" @click="dropdown"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="focus">{{focusContext}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!-- 标签 -->
      <el-tag
        v-for="(item, index) in tagName"
        :key="index"
        size="mini"
        type="success"
        >{{ item }}</el-tag
      >

      <!-- 时间 -->
      <span class="me-pull-right me-article-count">
        <i class="el-icon-time"></i>&nbsp;{{ article.createDate | format }}
      </span>
    </div>
  </el-card>
</template>

<script>
import global from "@/global/global";
import {checkFocus , Focus , unFocus} from "@/api/article"
export default {
  data() {
    return {
      tagName: [],
      isFocus: false,
      focusContext:"",
      nowUser:""
    };
  },

  props: {
    articleId: Number,
    title: String,
    commentCounts: Number,
    viewCounts: Number,
    articleContext: String,
    tag: String,
    createDate: String,
    nickname: String,
    sculpture: String,
    article: Object,
    paths: Array,
  },
  created() {
    var tagArr = this.article.tag.split(",");
    for (var i = 0; i < tagArr.length; i++) {
      this.tagName[i] = global.tagmap.get(tagArr[i]);
    }
    this.nowUser = localStorage.getItem("account")
  },

  methods: {
    view(articleId) {
      this.$router.push({ path: `/view/${articleId}` });
    },
    dropdown(){
       checkFocus(localStorage.getItem("account"),this.article.account).then((res) => {
        var vo = res.data;
        if (vo.code == 10000) {
          this.isFocus = true;
          this.focusContext = "取消关注"
        } else {
          this.isFocus = false;
          this.focusContext = "关注作者"
        }
      });
    },
    handleCommand(command){
      console.log(command)
      if(this.isFocus == false){
        Focus(localStorage.getItem("account"),this.article.account).then((res) => {
        var vo = res.data;
        if (vo.code == 10000) {
          this.$message({
            type: "success",
            message: "关注成功",
            showClose: true,
          });
        } else {
        }
      });
      }
      else{
         unFocus(localStorage.getItem("account"),this.article.account).then((res) => {
        var vo = res.data;
        if (vo.code == 10000) {
          this.$message({
            type: "success",
            message: "取关成功",
            showClose: true,
          });
        } else {
        }
      });
      }

    }
  },
};
</script>


<style lang = "less" scoped>
.me-article-header {
  /*padding: 10px 18px;*/
  padding-bottom: 10px;
}

.me-article-title {
  font-weight: 600;
}

.me-article-icon {
  padding: 3px 8px;
}

.me-article-count {
  color: #a6a6a6;
  padding-left: 14px;
  font-size: 13px;
}

.me-pull-right {
  float: right;
}

.me-artile-description {
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 10px;
}

.me-article-author {
  color: #a6a6a6;
  padding-right: 18px;
  font-size: 13px;
}

.el-tag {
  margin-left: 6px;
}
.articleItem-picflex {
  display: flex;
  width: 600px;
  height: auto;
  flex-wrap: wrap;
  margin-top: 10px;
}

.me-article-footer {
  margin-top: 10px;
}

.me-author-picture {
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 50%;
  vertical-align: middle;
  background-color: white;
}

.attention-wraper {
  float: right;
  .focus {
    max-width: 43px;
    border: 1px #ff8200 solid;
    color: #ff8200;
    padding: 6px;
    border-radius: 20px;
    font-size: 12px;
    margin-right: 5px;
    cursor: pointer;
  }
  .isFocus {
    border: 1px #333 solid;
    color: #333;
  }
}
</style>